<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>white-space</h1>
    <div style="white-space: normal;">
        <h3> white-space: normal —— 文本中输入的多个空格会被浏览器忽略(多个空格默认为一个空格)</h3>
        This is some text. This is some text.           This is some text.
        This is some text. This is some text.           This is some text.
        This is some text. This is some text.           This is some text.
        This is some text. This is some text.           This is some text.
        This is some text. This is some text.           This is some text.
    </div>
    <div style="white-space: pre;">
        <h3> white-space: pre —— 文本中的空格无论多少个都会被浏览器保留</h3>
        This is some text. This is some text.           This is some text.
        This is some text. This is some text.           This is some text.
        This is some text. This is some text.           This is some text.
        This is some text. This is some text.           This is some text.
        This is some text. This is some text.           This is some text.
    </div>
    <div style="white-space: nowrap;">
        <h3> white-space: nowrap —— 文本不换行除非遇上换行标签</h3>
        This is some text. This is some text.           This is some text.
        This is some text. This is some text.           This is some text.
        This is some text. This is some text.           This is some text.
        <br>
        This is some text. This is some text.           This is some text.
        This is some text. This is some text.           This is some text.
    </div>
</body>

</html>